import * as React from 'react'
import {RouteComponentProps } from 'react-router-dom';
import Nav from '../../components/nav'
import moment from 'moment';
import style from './style.less'

var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

interface Params {
  name : string
  email: string
  time : string
  content:string
  tip:string
}
type Props = RouteComponentProps<Params>
export default class Put extends React.Component<Props,any>{
  constructor (props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      time : moment().format("YYYY-MM-DD HH:mm:ss"),
      content:'',
      tip:' ',
      nameTip:'',
      emailTip:'',
      contentTip:''
    }
  }
  check(name,email,content){
    let flag =true;
    if (name.length == 0) {
      flag = false;
      this.setState({
        nameTip:'名字 必须填写'
      });
  } else {
    this.setState({
      nameTip:''
    });
  }
  if (email.length == 0) {
      flag = false;
      this.setState({
        emailTip:'邮箱 必须填写'
      })
  } else if (!myreg.test(email)) {
      flag = false;
      this.setState({
        emailTip:'邮箱 格式不对'
      })
  } else {
    this.setState({
      emailTip:''
    })
  }
  if (content.length == 0) {
      flag = false;
      this.setState({
        contentTip:'内容 必须填写'
      })
  } else {
    this.setState({
      contentTip:''
    })
  }
  return flag;
  }
  
  render() {
    return (
      <>
        <Nav />
        <div className="container">
          <h1 className="page-header">添加胶囊</h1>
          <div className="main">
            <form method="post">
              <label>你的名字</label>
              <span className={style.err}>
                {this.state.nameTip}
              </span>
              <input type="text" 
              name="name" 
              value={ this.state.name} 
              onChange = { (e)=>this.setState({
                name: e.target.value
              })}
                />
              <label>你的邮箱</label>
              <span className={style.err}>
              {this.state.emailTip}
              </span>
              <input name="email" 
              type="text" 
              value={this.state.email}
              onChange = { (e)=>this.setState({
                email: e.target.value
              })}
              />
              <label>打开时间</label>
              <input name="time"
              type="text" 
              value={this.state.time}
              onChange = { (e)=>this.setState({
                time: e.target.value
              })}
              />
              <span className="tips">打开时间之前，胶囊内容是看不到的。</span>
              <label>胶囊内容</label>
              <span className={style.err}>
              {this.state.contentTip}
              </span>
              <textarea name="content" 
              rows={8} cols={80}
              value={this.state.content}
              onChange = { (e)=>this.setState({
                content: e.target.value
              })}
              ></textarea>
              <span className="tips">胶囊内容不能超过5000字。</span>
              <label>未到期提示信息</label>
              <textarea name="tips" 
              rows={3} cols={80}
              value={this.state.tip}
              onChange = { (e)=>this.setState({
                tip: e.target.value
              })}
              ></textarea>
              <span className="tips">
                在 打开时间 之前打开胶囊，会看到提示信息。
              </span>
              <p>
                <button type="button" id="sub" 
                onClick={async()=>{
                  if (this.check(this.state.name, this.state.email, this.state.content)) {
                      let res = await fetch('http://127.0.0.1:3280/api/add', {
                          method: 'POST',
                          body: JSON.stringify({
                              name: this.state.name,
                              email: this.state.email,
                              time: this.state.time,
                              content: this.state.content,
                              tip: this.state.tip
                          })
                      })
                      let json = await res.json()
                      let id=json.id
                      localStorage.setItem("__id__",id)
                      this.props.history.push('/put_done')
                  }
                }
                }
                >添加胶囊</button>
              </p>
            </form>
          </div>
        </div>
      </>
    )
  }
}
